.box1 {
    height: 180px;
    width: 180px;
    border-radius: 10px;
    line-height: 180px;
    margin-top: 150px;
    margin-left: 250px;
}
.box2 {
    height: 180px;
    width: 180px;
    border-radius: 10px;
    line-height: 180px;
    margin-top: 150px;
    margin-right: 250px;
}
.container {
    display: flex;
    justify-content:center;

    flex-direction: column;  /* 按照列column(垂直方向)排列*/
}

.box1 a,
.box2 a {
    display: block;
    height: 180px;
    width: 180px;
    background-color: #FF9900;
    border-radius: 10px;
    text-align: center;
    font-family: YouYuan;
    font-weight: 700;
    font-size: 20px;
    color: #FFFFCC;
    transition: all 0.5s;
}
.box1 a:hover,
.box2 a:hover {
    box-shadow:0px 12px 20px -12px #FF9900;
    border-radius:10px; 
    transform: translateY(-8px);
}

@media screen and (max-width:800px){
    .box1 {
        height: 180px;
        width: 70%;
        margin: 30px auto;
        border-radius: 10px;
        line-height: 180px;
        float: none;
    }
    .box2 {
        height: 180px;
        width: 70%;
        margin: 30px auto;
        border-radius: 10px;
        line-height: 180px;
        float: none;
    }
    .box1 a,
    .box2 a {
        display: block;
        height: 180px;
        width: 100%;
        background-color: #FF9900;
        border-radius: 10px;
        text-align: center;
        font-family: YouYuan;
        font-weight: 100%;
        font-size: 20px;
        color: #FFFFCC;
        transition: all 0.5s;
    }
    .box1 a:hover,
    .box2 a:hover {
        box-shadow:0px 12px 20px -12px #FF9900;
        border-radius:10px;
        transform: translateY(-8px);
    }

}